<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link rel="stylesheet" type="text/css" href="./css/baseCss.css">
	<link href="./js/video-js.css" rel="stylesheet">
	<script src="./js/videojs-ie8.min.js"></script>
	<script src="./js/video.js"></script>
	<title>课程详情视频播放</title>
	<style type="text/css">
		.video-js{
			margin: 0 auto;
			width: 100%;
		}
		.vjs-paused .vjs-big-play-button,
		.vjs-paused.vjs-has-started .vjs-big-play-button {
    		display: block;
		}

        .videoLeft_listInc{
            position: absolute;
            right: 0;
            top: 0;
            height: 800px;
            overflow: auto;
            width: 15%;
        }
        .videoLeft_list{
            background-color: #fff;
            display: flex;
            padding: 10px;
        }
        .videoLeft_listText{
            font-size: 15px;
            margin-right: 10px;
            width: 240px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .videoLeft_list.videoLeft_listTar {
            background-color: #f5f9fd;
        }
        .videoInc{
            width: 85%;
        }
	</style>
</head>

<body>
	<div id="example">
		<all-header></all-header>
		<section class="posRel">
			<div class="videoInc">
                <video id="example_video_1" class="video-js vjs-big-play-centered" controls preload="none" width="640" height="264"  poster="http://vjs.zencdn.net/v/oceans.png">
                    <source src="http://192.168.2.70:89/97F405949F50EC5A2BAFC71278FD85F1.mp4" type="video/mp4">
                        <!-- http://192.168.0.167:89/97F405949F50EC5A2BAFC71278FD85F1.mp4 -->
                </video>         
            </div>
            <ul class="videoLeft_listInc">
                <li class="videoLeft_list" v-for="(video,index) in videos" @click="disvideoPlay(video.id,video.subjectId,video.relatedId,video.url,$event)">
                    <div class="videoLeft_listText">L{{index+1}}:&nbsp&nbsp{{video.name}}</div>
                    <div class="videoLeft_listLogo"><img src="./img/video01.png"></div>
                </li>
                <!--<li class="videoLeft_list videoLeft_listTar">-->
                    <!--<div class="videoLeft_listSel"></div>-->
                    <!--<div class="videoLeft_listText">L1:&nbsp&nbsp利用文档导航窗格控制文档结构</div>-->
                    <!--<div class="videoLeft_listLogo"><img src="./img/video01.png"></div>-->
                <!--</li>-->
            </ul>
		</section>
		<all-footer></all-footer>
	</div>
</body>
<script type="text/javascript" src="./js/jquery.min.js"></script>


<script type="text/javascript" src="./js/httpUnit.js"></script>
<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript" src="./component/allHeader.js"></script>
<script type="text/javascript" src="./component/allFooter.js"></script>
<script type="text/javascript">
	playVue();

    //Vue函数
    function playVue() {
        var allheader = allHeader();
        var allfooter = allFooter();
        var vm = new Vue({
            el: '#example',
            data: {
            	player:"",
            	// isstart:false,
            	isend:0,
                videos:"",//播放列表
                disvideoid:"",//当前点击的视频id
                videoid:""//当前点击的视频id
			},
            mounted:function(){
            	this.videoJs();
                
            },
			methods:{
                //初始化播放器
                videoJs:function(){
                    var curvideo = sessionStorage.getItem("curvideo");
                    curvideo = JSON.parse(curvideo);
                    

                    var list = this.listItem;
                	var options = {
    					muted: true,
    					controls : true,
    					height:800,
    					width:1200,
    					loop : false,
    					autoplay:true
					};
					this.player = videojs('example_video_1', options, function onPlayerReady() {
					
					    // vm.start();
					       
					    this.on("play",function () {
							console.log("开始");
                            // console.log(vm.isstart);
							// if(vm.isstart==false){
								// vm.isstart = true;
								vm.start();
							// }
					    });
					    this.on("ended",function () {
							console.log("结束");
                            
							if(vm.isend<2){
								vm.end();
							}
					    });
                        // setTimeout(function(){
                        //     console.log("切换");
                        //     vm.player.src({src: "http://192.168.0.167:89/820DF84FA392105691EF0B2AF2A30634.mp4", type: "video/mp4"});
                        // },5000);

					    vm.subjectDetail();//课程详情
					});
                    
				},
                //课程详情(显示列表)
                subjectDetail:function(){

                    var curvideo = sessionStorage.getItem("curvideo");

                    if(curvideo==null||curvideo==undefined||curvideo==""){
                        alert("获取视频列表错误,请重新获取");
                    }else{
                        curvideo = JSON.parse(curvideo);
                        // this.disvideoid = curvideo.subjectId;
                        // this.videoid = curvideo.id;
                        

                        this.disvideoPlay(curvideo.id,curvideo.subjectId,curvideo.relatedId,curvideo.url);//播放选中的视频
                        var id = curvideo.subjectId;
                        var obj = JSON.stringify({
                            "id": id
                        });
                        httpHelperpost("/api/subjects/subjectDetail", obj, function(isSuccess, data) {
                            if (isSuccess == true) {
                                var response = data.responseText;
                                var value = JSON.parse(response);
    
                                // console.log(response);
    
                                if(value.code == 0){
                                    console.log("查询成功");
                                    vm.videos = value.data.videos;
                                    
                                    setTimeout(function(){
                                        $(".videoLeft_listInc .videoLeft_list").eq(curvideo.index).addClass("videoLeft_listTar").siblings().removeClass("videoLeft_listTar");

                                    },500);
                                }else if(value.code==401){
                                    alert(value.message);
                                    window.location.href='./login.html';
                                }else{
                                    alert(value.message);
                                    console.log("查询失败");
                                    window.history.go(-1);
                                }
                            }else {}
                        });
                    }
                },
				//视频播放开始
				start:function(){
                    // var curvideo = sessionStorage.getItem("curvideo");
                    // curvideo = JSON.parse(curvideo);
                    // var subjectId = curvideo.subjectId;
                    var subjectId = this.disvideoid;
                    var videoId = this.videoid;
                    console.log(this.disvideoid);
					var obj = JSON.stringify({
                        "subjectId": subjectId,
                        "videoId": videoId
                    });

					httpHelperpost("/api/videos/start", obj, function(isSuccess, data) {
                        if (isSuccess == true) {
                            var response = data.responseText;
                            var value = JSON.parse(response);

                            console.log(response);

                            if(value.code == 0){
                                console.log("播放成功");
                            }else if(value.code==401){
                                alert(value.message);
                                window.location.href='./login.html';
                            }else{
                            	vm.player.pause();
                            	// vm.isstart= false;
                                alert(value.message);
                                console.log("播放失败");
                            }
                        }else {}
                    });
				},
				//视频播放结束
				end:function(){
                    // var curvideo = sessionStorage.getItem("curvideo");
                    // curvideo = JSON.parse(curvideo);
                    // var subjectId = curvideo.subjectId;
                    // var videoId = curvideo.id;
                    var subjectId = this.disvideoid;
                    var videoId = this.videoid;

					var obj = JSON.stringify({
                        "subjectId": subjectId,
                        "videoId": videoId
                    });
					httpHelperpost("/api/videos/end", obj, function(isSuccess, data) {
                        if (isSuccess == true) {
                            var response = data.responseText;
                            var value = JSON.parse(response);

                            // console.log(response);

                            if(value.code == 0){
                                console.log("播放结束");
                                var len = $(".videoLeft_list").length;
                                var curindex = $(".videoLeft_listTar").index();
                                
                                //判断是否为列表最后一个视频
                                if(len<=curindex+1){
                                }else{
                                    $(".videoLeft_list").eq(curindex+1).click();
                                }
                            }else if(value.code==401){
                                alert(value.message);
                                window.location.href='./login.html';
                            }else{
                            	vm.isend = vm.isend+1;
                                alert(value.message);
                                console.log("结束失败");
                            }
                        }else {}
                    });
				},
                //点击播放
                disvideoPlay:function(id,subjectId,relatedId,url,that){
                    this.disvideoid = subjectId;
                    this.videoid = id;
                    vm.player.src({src: "http://192.168.2.70:89/"+url+".mp4", type: "video/mp4"});

                    // console.log(relatedId);
                    // if(relatedId==""){
                    //     vm.player.src({src: "http://192.168.0.167:89/"+url+".mp4", type: "video/mp4"});
                    // }else{
                    //     alert("你的上一课程还没有学习完，还不可以观看");
                    // }
                    
                    if(that==undefined||that==null||that==""){

                    }else{
                        $(that.currentTarget).addClass("videoLeft_listTar").siblings().removeClass("videoLeft_listTar");
                    }
                    
                }
			},
            components: {
                'all-header': allheader,
                'all-footer': allfooter
            }
        })
    }
</script>
</html>